<!-- 页面：页面容器组件 | 时间：2025-01-14 -->
<template>
  <view class="page-container">
    <!-- 自定义导航栏 -->
    <CustomNavBar
      v-if="showNavBar"
      ref="navBarRef"
      :title="title"
      :show-back="showBack"
      :background-color="navBarBgColor"
      :title-color="titleColor"
      :icon-color="iconColor"
      :fixed="fixedNavBar"
      :transparent="transparentNavBar"
      @left-click="$emit('leftClick')"
      @right-click="$emit('rightClick')"
    >
      <template #left>
        <slot name="nav-left"></slot>
      </template>
      <template #center>
        <slot name="nav-center"></slot>
      </template>
      <template #right>
        <slot name="nav-right"></slot>
      </template>
    </CustomNavBar>

    <!-- 页面内容 -->
    <view class="page-content" :style="contentStyle">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import CustomNavBar from "./CustomNavBar.vue";

const props = defineProps({
  // 是否显示导航栏
  showNavBar: {
    type: Boolean,
    default: true,
  },
  // 导航栏标题
  title: {
    type: String,
    default: "",
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true,
  },
  // 导航栏背景色
  navBarBgColor: {
    type: String,
    default: "#f8f8f8",
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: "#333333",
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: "#333333",
  },
  // 是否固定导航栏
  fixedNavBar: {
    type: Boolean,
    default: true,
  },
  // 是否透明导航栏
  transparentNavBar: {
    type: Boolean,
    default: false,
  },
  // 页面背景色
  backgroundColor: {
    type: String,
    default: "#f8f8f8",
  },
});

defineEmits(["leftClick", "rightClick"]);

const navBarRef = ref(null);

// 内容区域样式
const contentStyle = computed(() => {
  const style = {
    backgroundColor: props.backgroundColor,
    // minHeight: "100vh",
  };
  // 如果显示固定导航栏，需要添加上边距
  if (props.showNavBar && props.fixedNavBar) {
    const navBarHeight = navBarRef.value?.navBarHeight || 88;
    style.paddingTop = navBarHeight + "px";
  }
  return style;
});
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100vh;

  .page-content {
    width: 100%;
  }
}

@media screen and (max-width: 720px) {
  .page-container {
    max-width: 450px;
    margin: 0 auto;
  }
}
</style>
